<template>
	<view class="pages">
		<!-- 图表 大学类型分布 -->
		<view class="u-p-t-40 bg-white">
			<view class="charts-box">
				<qiun-data-charts canvas2d :ontouch="true" :type="typeObj.type" :opts="typeObj.opts"
					:chartData="typeObj.chartData"></qiun-data-charts>
			</view>
		</view>
		<!-- 表格 大学类型分布 -->
		<view class="bg-white u-m-b-40">
			<view class="text-center u-p-t-30 u-m-b-40 u-font-28 color333">大学类型分布</view>
			<wyb-table ref="table" headerBgColor="#F9F9F9" :headers="typeHeaders" :contents="typeList" font-size="[50,60]"
				width="auto" />
		</view>

		<!-- 图表 A区B区分布 -->
		<view class="u-p-t-40 bg-white">
			<view class="charts-box">
				<qiun-data-charts canvas2d :ontouch="true" :type="ABObj.type" :opts="ABObj.opts"
					:chartData="ABObj.chartData"></qiun-data-charts>
			</view>
		</view>
		<!-- A区B区分布 -->
		<view class="bg-white u-m-b-40">
			<view class="text-center u-p-t-30 u-m-b-40 u-font-28 color333">A区B区分布</view>
			<wyb-table ref="table" headerBgColor="#F9F9F9" :headers="ABHeaders" :contents="ABList" font-size="[50,60]"
				width="auto" />
		</view>

		<!-- 图表 省分布 -->
		<view class="u-p-t-40 bg-white">
			<view class="charts-box">
				<qiun-data-charts canvas2d :ontouch="true" :type="SObj.type" :opts="SObj.opts"
					:chartData="SObj.chartData"></qiun-data-charts>
			</view>
		</view>
		<!-- 省市分布 -->
		<view class="bg-white u-m-b-40">
			<view class="text-center u-p-t-30 u-m-b-40 u-font-28 color333">省市分布</view>
			<wyb-table ref="table" headerBgColor="#F9F9F9" :headers="SHeaders" :contents="SList" font-size="[50,60]"
				width="auto" />
		</view>
	</view>
</template>

<script>
	import wybTable from '@/pages/toolbox/components/wyb-table/wyb-table.vue'
	import qiunDataCharts from '@/pages/toolbox/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	import {
		sameScoreGoMap
	} from "@/api/toolbox.js"

	export default {
		components: {
			wybTable,
			qiunDataCharts
		},
		data() {
			return {
				years: [],
				typeObj: {
					type: "column",
					opts: {
						duration: 500,
						fontSize: 12,
						dataLabel: false,
						dataPointShape: true,
						dataPointShapeType: "solid",
						touchMoveLimit: 60,
						enableScroll: true,
						enableMarkLine: false,
						legend: {
							show: true,
							position: "bottom",
							float: "center",
							fontSize: 12,
						},
						xAxis: {
							rotateLabel: true,
							rotateAngle: 20,
							disableGrid: true,
							axisLine: true,
							calibration: false,
							fontSize: 12,
							lineHeight: 20,
							marginTop: 0,
							itemCount: 5,
							boundaryGap: "center",
							splitNumber: 5,
							gridType: "solid",
							dashLength: 4,
							gridEval: 1,
							scrollShow: false,
							scrollAlign: "left",
							format: ""
						},
						yAxis: {
							data: [{
								min: 0
							}],
							disabled: false,
							disableGrid: false,
							splitNumber: 5,
							gridType: "solid",
							dashLength: 8,
							gridColor: "#CCCCCC",
							padding: 10,
							showTitle: false
						},
						extra: {
							column: {
								type: "group",
								width: 16,
								activeBgOpacity: 0.08,
								seriesGap: 4,
								categoryGap: 3,
								barBorderCircle: false,
								linearType: "opacity",
								linearOpacity: 0.5,
								colorStop: 0,
								meterBorder: 1,
								labelPosition: "outside"
							},
							tooltip: {
								showBox: true,
								showArrow: true,
								showCategory: false,
								borderWidth: 0,
								borderRadius: 0,
								borderOpacity: 0.7,
								bgOpacity: 0.7,
								gridType: "solid",
								dashLength: 4,
								boxPadding: 3,
								fontSize: 12,
								lineHeight: 20,
								legendShow: true,
								legendShape: "auto",
								splitLine: true,
								horizentalLine: false,
								xAxisLabel: false,
								yAxisLabel: false,
								labelBgOpacity: 0.7,
							},
						}
					},
					chartData: {}
				},
				ABObj: {
					type: "column",
					opts: {
						duration: 500,
						fontSize: 12,
						dataLabel: false,
						dataPointShape: true,
						dataPointShapeType: "solid",
						touchMoveLimit: 60,
						enableScroll: true,
						enableMarkLine: false,
						legend: {
							show: true,
							position: "bottom",
							float: "center",
							fontSize: 12,
						},
						xAxis: {
							disableGrid: true,
							axisLine: true,
							calibration: false,
							fontSize: 12,
							lineHeight: 20,
							marginTop: 0,
							itemCount: 5,
							boundaryGap: "center",
							splitNumber: 5,
							gridType: "solid",
							dashLength: 4,
							gridEval: 1,
							scrollShow: false,
							scrollAlign: "left",
							format: ""
						},
						yAxis: {
							data: [{
								min: 0
							}],
							disabled: false,
							disableGrid: false,
							splitNumber: 5,
							gridType: "solid",
							dashLength: 8,
							gridColor: "#CCCCCC",
							padding: 10,
							showTitle: false
						},
						extra: {
							column: {
								type: "group",
								width: 16,
								activeBgOpacity: 0.08,
								seriesGap: 4,
								categoryGap: 3,
								barBorderCircle: false,
								linearType: "opacity",
								linearOpacity: 0.5,
								colorStop: 0,
								meterBorder: 1,
								labelPosition: "outside"
							},
							tooltip: {
								showBox: true,
								showArrow: true,
								showCategory: false,
								borderWidth: 0,
								borderRadius: 0,
								borderOpacity: 0.7,
								bgOpacity: 0.7,
								gridType: "solid",
								dashLength: 4,
								boxPadding: 3,
								fontSize: 12,
								lineHeight: 20,
								legendShow: true,
								legendShape: "auto",
								splitLine: true,
								horizentalLine: false,
								xAxisLabel: false,
								yAxisLabel: false,
								labelBgOpacity: 0.7,
							},
						}
					},
					chartData: {}
				},
				SObj: {
					type: "column",
					opts: {
						duration: 500,
						fontSize: 12,
						dataLabel: false,
						dataPointShape: true,
						dataPointShapeType: "solid",
						touchMoveLimit: 60,
						enableScroll: true,
						enableMarkLine: false,
						legend: {
							show: true,
							position: "bottom",
							float: "center",
							fontSize: 12,
						},
						xAxis: {
							disableGrid: true,
							axisLine: true,
							calibration: false,
							fontSize: 12,
							lineHeight: 20,
							marginTop: 0,
							itemCount: 5,
							boundaryGap: "center",
							splitNumber: 5,
							gridType: "solid",
							dashLength: 4,
							gridEval: 1,
							scrollShow: false,
							scrollAlign: "left",
							format: ""
						},
						yAxis: {
							data: [{
								min: 0
							}],
							disabled: false,
							disableGrid: false,
							splitNumber: 5,
							gridType: "solid",
							dashLength: 8,
							gridColor: "#CCCCCC",
							padding: 10,
							showTitle: false
						},
						extra: {
							column: {
								type: "group",
								width: 16,
								activeBgOpacity: 0.08,
								seriesGap: 4,
								categoryGap: 3,
								barBorderCircle: false,
								linearType: "opacity",
								linearOpacity: 0.5,
								colorStop: 0,
								meterBorder: 1,
								labelPosition: "outside"
							},
							tooltip: {
								showBox: true,
								showArrow: true,
								showCategory: false,
								borderWidth: 0,
								borderRadius: 0,
								borderOpacity: 0.7,
								bgOpacity: 0.7,
								gridType: "solid",
								dashLength: 4,
								boxPadding: 3,
								fontSize: 12,
								lineHeight: 20,
								legendShow: true,
								legendShape: "auto",
								splitLine: true,
								horizentalLine: false,
								xAxisLabel: false,
								yAxisLabel: false,
								labelBgOpacity: 0.7,
							},
						}
					},
					chartData: {}
				},
				SList: [],
				SHeaders: [{
					label: '省/直辖市',
					key: 'type',
					width: 280
				}],
				ABList: [],
				ABHeaders: [{
					label: 'A区/B区',
					key: 'type',
					width: 280
				}],
				typeHeaders: [{
					label: '大学类型',
					key: 'type',
					width: 280
				}],
				typeList: [],
				majorCode: "",
				firstTotal: "",
				pageSize: 10,
				pageNum: 1,
				sameSchool: 1
			}
		},
		onLoad(e) {
			this.sameSchool = e.key || 1;
			let title = e.key == '1' ? '同分去向地图' : '同校去向地图';
			uni.setNavigationBarTitle({
				title: title
			})
			this.handleNews();
		},
		methods: {
			getData() {
				uni.showLoading({
					mask: true
				});
				sameScoreGoMap({
					majorCode: this.majorCode,
					firstTotal: this.firstTotal,
					pageSize: 20,
					pageNum: 1,
					sameSchool: this.sameSchool
				}).then(res => {
					console.log('res: ', res);
					if (res.code == 100000) {
						this.years = res.data.yearList;
						this.years.forEach((e, i) => {
							switch (i) {
								case 0:
									this.SHeaders.push({
										label: e,
										key: 'AFirstYear',
										width: 100
									})
									this.ABHeaders.push({
										label: e,
										key: 'AFirstYear',
										width: 100
									})
									this.typeHeaders.push({
										label: e,
										key: 'AFirstYear',
										width: 100
									})
									break;
								case 1:
									this.SHeaders.push({
										label: e,
										key: 'ASecondYear',
										width: 100
									})
									this.ABHeaders.push({
										label: e,
										key: 'ASecondYear',
										width: 100
									})
									this.typeHeaders.push({
										label: e,
										key: 'ASecondYear',
										width: 100
									})
									break;
								case 2:
									this.SHeaders.push({
										label: e,
										key: 'AThirdYear',
										width: 100
									})
									this.ABHeaders.push({
										label: e,
										key: 'AThirdYear',
										width: 100
									})
									this.typeHeaders.push({
										label: e,
										key: 'AThirdYear',
										width: 100
									})
									break;
								case 3:
									this.SHeaders.push({
										label: e,
										key: 'FourthYear',
										width: 100
									})
									this.ABHeaders.push({
										label: e,
										key: 'FourthYear',
										width: 100
									})
									this.typeHeaders.push({
										label: e,
										key: 'FourthYear',
										width: 100
									})
									break;
							}
						})
						if (res.data.schoolType && res.data.schoolType.length) {
							let categories = res.data.schoolType.map(e => {
								return e.provinceName;
							})
							let series = [];
							for (let i = 0; i < this.years.length; i++) {
								series.push({
									name: this.years[i],
									data: res.data.schoolType.map(v => {
										return v['studentN' + i];
									})
								})
							}
							this.typeObj.chartData = JSON.parse(JSON.stringify({
								categories: categories,
								series: series
							}))
							this.typeList = res.data.schoolType.map(e => {
								return {
									type: e.provinceName,
									AFirstYear: e.studentN0,
									ASecondYear: e.studentN1,
									AThirdYear: e.studentN2,
									FourthYear: e.studentN3
								}
							})
						}

						if (res.data.area && res.data.area.length) {
							let categories = res.data.area.map(e => {
								return e.provinceName;
							})
							let series = [];
							for (let i = 0; i < this.years.length; i++) {
								series.push({
									name: this.years[i],
									data: res.data.area.map(v => {
										return v['studentN' + i];
									})
								})
							}
							this.ABObj.chartData = JSON.parse(JSON.stringify({
								categories: categories,
								series: series
							}))
							this.ABList = res.data.area.map(e => {
								return {
									type: e.provinceName,
									AFirstYear: e.studentN0,
									ASecondYear: e.studentN1,
									AThirdYear: e.studentN2,
									FourthYear: e.studentN3
								}
							})
						}
						if (res.data.province && res.data.province.length) {

							let categories = res.data.province.map(e => {
								return e.provinceName;
							})
							let series = [];
							for (let i = 0; i < this.years.length; i++) {
								series.push({
									name: this.years[i],
									data: res.data.province.map(v => {
										return v['studentN' + i];
									})
								})
							}
							this.SObj.chartData = JSON.parse(JSON.stringify({
								categories: categories,
								series: series
							}))

							this.SList = res.data.province.map(e => {
								return {
									type: e.provinceName,
									AFirstYear: e.studentN0,
									ASecondYear: e.studentN1,
									AThirdYear: e.studentN2,
									FourthYear: e.studentN3
								}
							})
						}

					}
				}).finally(() => {
					uni.hideLoading();
				})
			},
			//获取最新信息
			handleNews() {
				let storeSync = uni.getStorageSync('chooseArr');
				let storeSyncFraction = uni.getStorageSync('fraction');
				if (storeSyncFraction && storeSync) {
					storeSyncFraction = JSON.parse(storeSyncFraction);
					storeSync = JSON.parse(storeSync);
					this.majorCode = storeSync[3].value;
					this.firstTotal = storeSyncFraction.scroll1;
					this.getData();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		background-color: #F2F2F2;
		min-height: 100vh;
		padding: 36rpx 30rpx;

		.charts-box {
			width: 100%;
			height: 500rpx;
			background-color: #fff;
		}

	}
</style>